<template>
    <el-cascader ref="cascader" :disabled="disabled"
        :options="options"
        :props="props"
        v-model="inputValue"
        @change="onChange"
        clearable></el-cascader>
</template>
<script>
export default {
    name: "SelectCityArea",
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        value: {
            type: [String, Array],
            default: () => ''
        },
        checkStrictly: {
            type: Boolean,
            default: ()=> false
        },
        disabled: {
            type: Boolean,
            default: ()=> false
        }
    },
    watch: {
        value() {
            this.inputValue = this.value && typeof this.value === 'string' ? this.value.split(',') : this.value
            this.inputValue = this.inputValue.filter(el=>{
                return !!el
            })
        }
    },
    data() {
        return {
            inputValue: [],
            options: [],
            props: {
                lazy: true,
                lazyLoad: this.cascaderLazyLoad,
                checkStrictly: this.checkStrictly
            }
        }
    },
    methods: {
        cascaderLazyLoad(node, resolve) {
            const { level, value } = node;
            const parentId = value || level
            this.request.get('/admin/system.cityArea/getByParent', {params: {parentId}}).then(response => {
                let data = response.data || []
                const nodes = data.map((el)=>{
                    return {
                        value: el.id,
                        label: el.name,
                        leaf: level >= 2
                    }
                })
                resolve(nodes);
            }).finally(() => {
            })
        },
        onChange() {
            let val = this.inputValue
            let CheckedNodes = this.getCheckedNodes()
            this.$emit('change', val, CheckedNodes)
            this.$emit('input', val, CheckedNodes)
            this.$emit('update:model', val, CheckedNodes)
        },
        getCheckedNodes() {
            return this.$refs.cascader.getCheckedNodes()
        }
    }
}
</script>

<style scoped>

</style>
